<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='box' index="1" class="new"  i="2"></div>
    <script>
        // 之前获取属性值的方式  [获取内置属性值]
       let div=document.querySelector('div')
       console.log(div.id); // box
       console.log(div.index); // undefined
    
    // Element.getAttribute('属性') 主要获取自定义属性   
    console.log(div.getAttribute('id')); // box
    console.log(div.getAttribute('index')); // 1

    // element.属性='值'  修改属性值
    div.id='box1'; // 把div的id属性值修改为box1 id="box1"
    div.className='new1' // 把div的class属性值修改为new1 class="new1"

    // 设置属性值 Element.setAttribute('属性',值)  主要针对自定义属性   数字可以不用双引号(推荐加双引号)
    div.setAttribute('index',2); // 把div的index属性值修改为2
    div.setAttribute('class','new2') // 这里class比较特殊 里面就是class 而不是className

    // 移除属性值 element.removeAttribute('属性')
    div.removeAttribute('i') // 移除div里面自定义的属性i
    </script>
</body>
</html>